<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .select {
            width: 100px;
            height: 25px;
        }
    </style>
</head>

<body>
    <div class="box">
        <input type="text" class="number1" value=" ">
        <select name="" id="select" class="select">
            <option value="0" >请选择</option>
            <option value="1">+</option>
            <option value="2">-</option>
            <option value="3">*</option>
            <option value="4">/</option>
        </select>
        <input type="text" class="number2" value=" ">
        <input type="button" value="=" class="btn">
        <input type="text" class="result" value=" ">
    </div>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        // 获取元素
        var $a = $(".number1")
        var $se = $(".select")
        var $opts = $("option")
        var $b = $(".number2")
        var $btn = $(".btn")
        var $r = $(".result")

        
        // 点击按纽时 选择运算符号
        $btn.click(function () {
        var n = $se.find("option:selected").val()
        console.log(n)
        var x = parseInt($a.val())
        var y = parseInt($b.val())
        switch (n) {
            case "1":
                $r.val(x + y);
                break;
            case "2":
                $r.val(x - y);
                break;
            case "3":
                $r.val(x * y);
                break;
            case "4":
                $r.val(x / y);
                break;
        }
        })

    </script>

</body>

</html>